<template>
  <el-row>
    <el-col :span="6">
      <el-statistic title="当天收入" suffix="元" v-model:value="dayAmount" />
    </el-col>
    <el-col :span="6">
      <el-statistic title="当月收入" suffix="元" v-model:value="monthAmount" />
    </el-col>
    <el-col :span="6">
      <el-statistic
        title="上月收入"
        suffix="元"
        v-model:value="lastMonthAmount"
      />
    </el-col>
    <el-col :span="6">
      <el-statistic title="年累计收入" suffix="元" v-model:value="yearAmount" />
    </el-col>
  </el-row>
   
  <div
    ref="echartsRef"
    style="width: 100%; height: 500px; margin-top: 30px"
  ></div>
</template>

<script  setup>
import { ChatLineRound, Male } from "@element-plus/icons-vue";
import { Timer } from "@element-plus/icons-vue";
import { dbConnect } from "@/utils/sqlUtils.js";
import { reactive, ref, onMounted, onBeforeMount } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as utils from "@/utils/utils.js";
import * as echarts from "echarts";
import dayjs from "dayjs";

const dayAmount = ref(0);
const monthAmount = ref(0);
const yearAmount = ref(0);
const echartsRef = ref();
const lastMonthAmount = ref(0);

let xDays = [];
let yTotalData = [];

getDayAmount();
getMonthAmount();
getYearAmount();
getLastMonthAmount();

onMounted(() => {
  Promise.all([
    new Promise((resolve, reject) => {
      let beginDay = utils.getFullDay(dayjs().subtract(30, "day").toDate());
      let endDate = utils.getFullDay();
      dbConnect.each(
        `select DISTINCT day from sales_record where day >= '${beginDay}' and day <= '${endDate}' order by day desc`,
        (err, row) => {
          xDays.push(row.day);
          resolve(xDays);
        }
      );
    }),
    new Promise((resolve, reject) => {
      let beginDay = utils.getFullDay(dayjs().subtract(30, "day").toDate());
      let endDate = utils.getFullDay();
      dbConnect.each(
        `select sum(actuallyPaidAmount) as amount from sales_record where day >= '${beginDay}' and day <= '${endDate}' group by day order by day desc`,
        (err, row) => {
          yTotalData.push(row.amount.toFixed(2));
          resolve(yTotalData);
        }
      );
    }),
  ]).then((result) => {
    initEcharts();
  });
});

function getDayAmount() {
  dbConnect.all(
    "select sum(actuallyPaidAmount) as paidAmount from sales_record where day = " +
      utils.getFullDay(),
    (err, row) => {
      dayAmount.value = (
        row[0].paidAmount == null ? 0 : row[0].paidAmount
      ).toFixed(2);
    }
  );
}

function getMonthAmount() {
  dbConnect.all(
    "select sum(actuallyPaidAmount) as paidAmount from sales_record where month = " +
      utils.getFullMonth(),
    (err, row) => {
      monthAmount.value = (
        row[0].paidAmount == null ? 0 : row[0].paidAmount
      ).toFixed(2);
    }
  );
}

function getLastMonthAmount() {
  dbConnect.all(
    "select sum(actuallyPaidAmount) as paidAmount from sales_record where month = " +
      utils.getLastFullMonth(),
    (err, row) => {
      lastMonthAmount.value = (
        row[0].paidAmount == null ? 0 : row[0].paidAmount
      ).toFixed(2);
    }
  );
}

function getYearAmount() {
  dbConnect.all(
    "select sum(actuallyPaidAmount) as paidAmount from sales_record where year = " +
      utils.getYear(),
    (err, row) => {
      yearAmount.value = (
        row[0].paidAmount == null ? 0 : row[0].paidAmount
      ).toFixed(2);
    }
  );
}

function initEcharts() {
  const myChart = echarts.init(echartsRef.value);
  let option = {
    title: {
      text: "30天内每天收入",
    },
    tooltip: {},
    legend: {
      data: ["收入 (单位：元)"],
    },
    xAxis: {
      data: [...xDays],
    },
    yAxis: {},
    series: [
      {
        name: "收入 (单位：元)",
        type: "bar",
        data: [...yTotalData],
      },
    ],
  };
  myChart.setOption(option);
}
</script>

<style scoped>
.el-col {
  text-align: center;
}
</style>
